<template>
    <div id=push>
        <div>
            <!-- 查询 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <!-- 添加按钮 -->
                <el-button type="danger" @click="dialogFormVisible = true">添加</el-button>

                <!-- 查询 -->
                <el-form-item label="">
                    <el-input v-model="formInline.proName" placeholder="商品名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 商品列表显示 -->
        <el-table
        :data="tableData"
        style="width: 100%">
            <el-table-column
                prop="proId"
                label="商品ID"
                width="125">
            </el-table-column>
            <el-table-column  label="商品图片"
                width="125">
                <template slot-scope="scope">
                    <el-popover placement="top-start" title="" trigger="hover">
                        <img :src="scope.row.picUrl" alt="" style="width: 150px;height: 150px">
                        <img slot="reference" :src="scope.row.picUrl" style="width: 30px;height: 30px">
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="proName"
                label="商品名称"
                width="125">
            </el-table-column>
            <el-table-column
                prop="proType"
                label="商品分类"
                width="125">
            </el-table-column>
            <el-table-column
                prop="sales"
                label="商品销量"
                width="125">
            </el-table-column>
            <el-table-column
                prop="sort"
                label="商品排序"
                width="125">
            </el-table-column>
            <el-table-column
                prop="upOrSet"
                label="商品状态"
                width="125" :formatter="upset">
            </el-table-column>
            <el-table-column
                prop="isDelete"
                label="是否删除"
                width="125" :formatter="isdel">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="warning"
                    @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row.proId)">删除</el-button>
                    <el-button
                    size="mini"
                    type="primary"
                    @click="handleRecy(scope.row.proId)">加入回收站</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currIndex"
            :page-sizes="[3, 6, 9, 12]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
            </el-pagination>
        </div>

        <!-- 添加 -->
        <el-dialog title="添加" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" :rules="rules">
                <el-form-item label="商品名称" :label-width="formLabelWidth" prop="proName">
                    <el-input v-model="form.proName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品分类" :label-width="formLabelWidth" prop="proType">
                    <el-input v-model="form.proType" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="原价" :label-width="formLabelWidth" prop="price">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="现价" :label-width="formLabelWidth" prop="newPrice">
                    <el-input v-model="form.newPrice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="picUrl">
                    <el-upload
                    ref="picUrl"
                    :file-list="ImageUrlfileList"
                    :action="ImageUrlAction"
                    :before-upload="ImageUrlBeforeUpload"
                    :on-success="handleAvatarSuccess"
                    accept="image/*" 
                    >
                    <el-button size="small" type="primary" icon="el-icon-upload"
                        >点击上传</el-button
                    >
                    </el-upload>
                </el-form-item>
                <el-form-item label="生产地址" :label-width="formLabelWidth" prop="proAdress">
                    <el-input v-model="form.proAdress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="保质期" :label-width="formLabelWidth" prop="sheifLife">
                    <el-input v-model="form.sheifLife" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth" prop="proNum">
                    <el-input v-model="form.proNum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
                    <el-input v-model="form.sort" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="库存" :label-width="formLabelWidth" prop="inventory">
                    <el-input v-model="form.inventory" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth" prop="upOrSet">
                    <el-radio-group v-model="form.upOrSet">
                        <el-radio label="1" value="1">已上架</el-radio>
                        <el-radio label="2" value="2">已下架</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否删除" :label-width="formLabelWidth" prop="isDelete">
                    <el-radio-group v-model="form.isDelete">
                        <el-radio label="1" value="1">未删除</el-radio>
                        <el-radio label="2" value="2">已删除</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="添加时间" :label-width="formLabelWidth" prop="addTime">
                    <el-input type="date" v-model="form.addTime" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="买过人数" :label-width="formLabelWidth" prop="bought">
                    <el-input v-model="form.bought" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商家" :label-width="formLabelWidth" prop="business">
                    <el-input v-model="form.business" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="dialogFormAdd('form')">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 修改 -->
        <el-dialog title="修改" :visible.sync="dialogFormVisibles">
            <el-form ref="forms" :model="forms" :rules="rules">
                <el-form-item label="商品名称" :label-width="formLabelWidth" prop="proName">
                    <el-input v-model="forms.proName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品分类" :label-width="formLabelWidth" prop="proType">
                    <el-input v-model="forms.proType" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="原价" :label-width="formLabelWidth" prop="price">
                    <el-input v-model="forms.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="现价" :label-width="formLabelWidth" prop="newPrice">
                    <el-input v-model="forms.newPrice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品图片" :label-width="formLabelWidth" prop="picUrl">
                    <!-- <el-input v-model="forms.picUrl" autocomplete="off"></el-input> -->
                    <img :src="forms.picUrl" width="88px" height="88px" />
                </el-form-item>
                <el-form-item label="生产地址" :label-width="formLabelWidth" prop="proAdress">
                    <el-input v-model="forms.proAdress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="保质期" :label-width="formLabelWidth" prop="sheifLife">
                    <el-input v-model="forms.sheifLife" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth" prop="proNum">
                    <el-input v-model="forms.proNum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
                    <el-input v-model="forms.sort" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="库存" :label-width="formLabelWidth" prop="inventory">
                    <el-input v-model="forms.inventory" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth" prop="upOrSet">
                    <el-radio-group v-model="forms.upOrSet">
                        <el-radio :label="1" value="1">已上架</el-radio>
                        <el-radio :label="2" value="2">已下架</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否删除" :label-width="formLabelWidth" prop="isDelete">
                    <el-radio-group v-model="forms.isDelete">
                        <el-radio :label="1" value="1">未删除</el-radio>
                        <el-radio :label="2" value="2">已删除</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="添加时间" :label-width="formLabelWidth" prop="addTime">
                    <el-input type="date" v-model="forms.addTime" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="买过人数" :label-width="formLabelWidth" prop="bought">
                    <el-input v-model="forms.bought" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商家" :label-width="formLabelWidth" prop="business">
                    <el-input v-model="forms.business" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibles = false">取 消</el-button>
                <el-button type="primary" v-on:click="dialogFormUpts('forms')">确 定</el-button>
            </div>
        </el-dialog>
        
    </div>
  </template>

 <script>
     import VuePreview from 'vue-preview';
    export default {
      data() {
        return {
            tableData: [], //定义数据属性
            count: 0,
            currIndex: 1,
            pageSize: 3,
            form:{
                proName: '',
                proType:'',
                price: '',
                newPrice: '',
                picUrl: '',
                proAdress: '',
                sheifLife: '',
                proNum: '',
                sort: '',
                inventory: '',
                upOrSet:'',
                isDelete:'',
                addTime: '',
                bought: '',
                business: ''
            },
            forms:{
                proName: '',
                proType:'',
                price: '',
                newPrice: '',
                picUrl: '',
                proAdress: '',
                sheifLife: '',
                proNum: '',
                sort: '',
                inventory: '',
                upOrSet:'',
                isDelete:'',
                addTime: '',
                bought: '',
                business: ''
            },
            dialogFormVisible:false,
            dialogFormVisibles:false,
            formLabelWidth:'120px',
            formInline: {
                proName: ''
            },
            ImageUrlfileList:[],
            ImageUrlAction:"https://localhost:44324/api/Product/Upload",
            details:[{}],
            rules:{
                proName: [{
                    required: true,
                    message: '请输入商品名称',
                    trigger: 'blur'
                }],
                proType:[{
                    required: true,
                    message: '请输入商品分类',
                    trigger: 'blur'
                }],
                price: [{
                    required: true,
                    message: '请输入原价',
                    trigger: 'blur'
                }],
                newPrice: [{
                    required: true,
                    message: '请输入现价',
                    trigger: 'blur'
                }],
                picUrl: [{
                    required: true,
                    message: '请输入图片',
                    trigger: 'blur'
                }],
                proAdress: [{
                    required: true,
                    message: '请输入收货地址',
                    trigger: 'blur'
                }],
                sheifLife: [{
                    required: true,
                    message: '请输入保质期',
                    trigger: 'blur'
                }],
                proNum: [{
                    required: true,
                    message: '请输入数量',
                    trigger: 'blur'
                }],
                sort: [{
                    required: true,
                    message: '请输入排序',
                    trigger: 'blur'
                }],
                inventory: [{
                    required: true,
                    message: '请输入库存',
                    trigger: 'blur'
                }],
                upOrSet: [{
                    required: true,
                    message: '请输入库存',
                    trigger: 'blur'
                }],
                isDelete: [{
                    required: true,
                    message: '请输入库存',
                    trigger: 'blur'
                }],
                addTime: [{
                    required: true,
                    message: '请输入创建时间',
                    trigger: 'blur'
                }],
                bought: [{
                    required: true,
                    message: '请输入买过',
                    trigger: 'blur'
                }],
                business: [{
                    required: true,
                    message: '请输入商家',
                    trigger: 'blur'
                }]
            }
            
        }
      },
        // 组件被创建时间处理
        created:function(){
            // 用axios发送请求给api
            this.axios
                .get("https://localhost:44324/api/Product/Index",
                    {params:{pageIndex:this.currIndex, //传递的参数
                             pageSize:this.pageSize}})
                .then((res) => {this.tableData = res.data.data; this.count = res.data.count});
        },
        //挂载完成执行
        mounted(){
            //判断状态
            if(tableData.upOrSet==1){
                this.upOrSet="男";
                this.tableData.upOrSet=1;
            }
            else{
                this.upOrSet="女";
                this.tableData.upOrSet=2;
            }
            //判断是否删除
            if(tableData.isDelete){
                this.isDelete="未删除";
                this.tableData.isDelete=1;
            }
            else{
                this.isDelete="已删除";
                this.tableData.isDelete=2;
            }
        },
        methods: {
            show(){
                // 用axios发送请求给api
                this.axios
                    .get("https://localhost:44324/api/Product/Index",
                        {params:{pageIndex:this.currIndex, //传递的参数
                                pageSize:this.pageSize}})
                    .then((res) => {this.tableData = res.data.data; this.count = res.data.count});
            },
            //状态
            upset: function(row,column,cellValue,index){
                if(row.upOrSet == 1){
                    return '已上架'
                }else if(row.upOrSet == 2){
                    return '已下架'
                }
            },
            //是否删除
            isdel: function(row,column,cellValue,index){
                if(row.isDelete == 1){
                    return '未删除'
                }else if(row.isDelete == 2){
                    return '已删除'
                }
            },
            //分页条数
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            // 用axios发送请求给api
            this.axios
                .get("https://localhost:44324/api/Product/Index",
                    {params:{pageIndex:this.currIndex, //传递的参数
                             pageSize:val}})
                .then((res) => {this.tableData = res.data.data; this.count = res.data.count});
            },
            //分页页数
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            // 用axios发送请求给api
            this.axios
                .get("https://localhost:44324/api/Product/Index",
                    {params:{pageIndex:val, //传递的参数
                             pageSize:this.pageSize}})
                .then((res) => {this.tableData = res.data.data; this.count = res.data.count});
            },
            //查询
            onSubmit(){
                //调用api接口
                this.axios
                .get("https://localhost:44324/api/Product/Index",
                    {params:{pname:this.formInline.proName,
                            pageIndex:this.currIndex, //传递的参数
                             pageSize:this.pageSize}})
                .then((res) => {this.tableData = res.data.data; this.total = res.data.count});
            },
            //添加
            dialogFormAdd(form){
                console.log(this.form);
                this.$refs[form].validate((valid) => {
                    if(valid){
                        this.axios({
                        url: 'https://localhost:44324/api/Product/AddProduct',
                        method: 'post',
                        data: this.form
                        }).then((res) => {
                            if (res.data.code > 0) {
                                console.log();
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                                this.show(); //刷新
                            } else {
                                this.$message({
                                type: 'info',
                                message: '已取消添加'
                                })
                            }
                        })
                    }else{
                        console.log('error submit!');
                        return false;
                    }
                })
                
            },
            //重置
            resetForm(form) {
                this.$refs[form].resetFields();
            },
            //图片上传前
            beforeUpload(file) {
                this.file = file //需要传给后台的file文件
                const reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = () => {
                    const _base64 = reader.result
                    this.form.picUrl = _base64 //将_base64赋值给图片的src，实现图片预览
                }
                return false//阻止图片继续上传，使得form表单提交时统一上传
            },
            //图片上传
            ImageUrlBeforeUpload(file) {
                let isRightSize = file.size / 1024 / 1024 < 5;
                if (!isRightSize) {
                    this.$message.error("文件大小超过 5MB");
                }
                let isAccept = new RegExp("image/*").test(file.type);
                if (!isAccept) {
                    this.$message.error("应该选择image/*类型的文件");
                }
                return isRightSize && isAccept;
            },
            //上传成功
            handleAvatarSuccess(response, file) {
                this.form.picUrl = response.newFileName;
                console.log(this.ImageName);
            },
            //删除
            handleDelete(a) {
                //console.log(index, row);
                //this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    //confirmButtonText: '确定',
                    //cancelButtonText: '取消',
                    //type: 'warning',
                    //center: true //居中布局
                //})
                if(!confirm("确认删除吗？")){
                    return;
                }
                this.axios
                    .delete('https://localhost:44324/api/Product/DelProduct', 
                        {params:{id:a}})
                    .then((res) => {
                        if (res.data.code > 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.show(); //刷新
                        } else {
                            this.$message({
                            type: 'info',
                            message: '已取消删除'
                            })
                        }
                    })
            },
            //反填
            handleEdit(f){
                this.dialogFormVisibles = true;
                this.forms=f;
                var id=f.proId;
                console.log(id);
            },
            //修改
            dialogFormUpts(forms){
                console.log(this.forms);
                this.$refs[forms].validate((valid) => {
                    if(valid){
                        this.axios({
                        url: 'https://localhost:44324/api/Product/UptProduct',
                        method: 'post',
                        data: this.forms,
                        }).then((res) => {
                            if (res.data.code > 0) {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                });
                                this.show(); //刷新
                            } else {
                                this.$message({
                                type: 'info',
                                message: '已取消修改'
                                })
                            }
                        })
                    }else{
                        console.log('error submit!');
                        return false;
                    }
                })
                
            },
            //加入回收站
            handleRecy(a){
                if(!confirm("确认加入回收站吗？")){
                    return;
                }
                console.log(a);
                this.axios
                    .post('https://localhost:44324/api/Product/Recyc?id='+a)
                    .then((res) => {
                        if (res.data.code > 0) {
                            this.$message({
                                type: 'success',
                                message: '回收成功!'
                            });
                            this.show(); //刷新
                            this.$router.push("/Recyc");
                        } else {
                            this.$message({
                            type: 'info',
                            message: '已取消回收'
                            })
                        }
                    })
            },
            
        }
    }
  </script>
